<template>
  <dv-full-screen-container class="container">
    <header-bar />
    <div class="content" v-if="iscontent">
      <div class="left-card">
        <container-card
          title="课程及格分布"
          :style="{
            width: '400px',
            height: '304px'
          }"
        >
          <bar-chart />
        </container-card>
        <container-card
          title="最新榜单"
          :style="{
            width: '400px',
            height: '384px'
          }"
        >
          <group-pk />
        </container-card>
      </div>
      <div class="center-card">
        <container-card
          :style="{
            width: '800px',
            height: '708px'
          }"
        >
          <seat-table />
        </container-card>
      </div>
      <div class="right-card">
        <container-card
          title="通知公告"
          :style="{
            width: '400px',
            height: '208px'
          }"
        >
        </container-card>
        <container-card
          title="榜单"
          :style="{
            width: '400px',
            height: '508px'
          }"
        >
          <ranking-chart />
        </container-card>
      </div>
    </div>
  </dv-full-screen-container>
</template>
<script>
import storage from '@/utils/storage'

export default {
  data () {
    return {
      iscontent: false
    }
  },
  created () {
    if (storage.getItem('seat')) {
      this.iscontent = true
    }
  }
}
</script>

<style lang="scss">
.container {
  background: #041A21;
  padding: 20px;
  box-sizing: border-box;
  .content {
    display: flex;
    & > div {
      margin-left: 20px;
      &:nth-child(1) {
        margin: 0;
      }
    }
  }
}
</style>
